<template>
    <div class="swiperGN">
        <div class="show_title">
            属性推荐  
        </div>
        <div class="swiperGN_label">
            <div class="swiper-pagination"></div>
        </div>
        <div class="swiper-container">
            <div class="swiper-wrapper" >
                <div class="swiper-slide" v-for="item in labels" :key="item.index">
                    <ul>
                        <li v-for="items in item.line" :key="items.id">
                            <img :src="$baseurl+'/'+items.img" alt="">
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
  
</template>

<script>
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'
export default {
    props:[
        'swiperNGurl'
    ],
    data(){
        return {
            labels:[]
        }
    },
    async mounted (){
        let { data } = await this.$axios.get(this.$baseurl+this.swiperNGurl)
        if(data.length !=0){
            this.labels = data
            this.$nextTick(()=>{
                this.initSwiper()
            })
        }
         
    },
    methods:{
        initSwiper (){
            this.mySwiper = new Swiper('.swiper-container',{
                observer:true,
                observeParents:true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                    renderBullet: function (index, className) {
                    return '<span class="' + className + '">' + this.labels[index].title + '</span>';
                    }.bind(this),
                },
            })
        }
    }

}
</script>

<style lang='scss'>
    .swiperGN{
        background: #fff;
        padding: 0.12rem;
        border-radius: 0.12rem;
        .show_title{
            font-size: 0.28rem;
            line-height: 0.62rem;
            color: #747474;
            margin: 0 0.13rem 0;
        }
        .swiperGN_label{
            height: 0.64rem;
            position: relative;
            left: -0.12rem;
            .swiper-pagination{
                position: relative;
                text-align: left;
                span{
                    font-size:0.26rem ;
                    line-height: 0.58rem;
                    width: 1.3rem;
                    height: 0.58rem;
                    background: #fff;
                    color: #5e5656;
                    opacity: 1;
                    position: relative;
                    outline:none;
                    text-align: center;

                }
                .swiper-pagination-bullet-active{
                    color: #d61619;
                }
                span::after{
                    content: '';
                    display: inline-block;
                    height: 0.36rem;
                    width: 0.02rem;
                    background: #eaeaea;
                    position: absolute;
                    right: -0.01rem;
                    top: 0.12rem;
                }
            }

        }
        .swiper-container{
            height: 3.96rem;

            .swiper-wrapper{
                .swiper-slide{
                    overflow: auto;
                    ul{
                        display: flex;
                        flex-wrap: wrap;
                        li{
                            border: 0.01rem solid #eaeaea;
                            margin: 0.06rem;
                            img{
                                width: 1.5rem;
                                height: 1.84rem;
                                display: block;
                            }
                        }
                    }
                }
            }
        }
    }

</style>